<template>
    <article class="container-group-statistics">
        <Browser :basic-info="basicInfo" @select-column="onSelectColumn"></Browser>
        <LineChart
            ref="lineChart"
            :chart-info="chartInfo"
            @select-column="onSelectGroupBasicColumn"
            @change-date="handleChangeDate"></LineChart>

        <select-colunm-dialog
            v-model="selectColumnVisable"
            v-bind="selectColumnProps"
            @submit="onSubmit"
            @cancel="onSubmit">
            <template #description>
                <component :is="componentId"></component>
            </template>
        </select-colunm-dialog>
    </article>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import SelectColunmDialog from '@/components/zw/select-colunm-dialog/select-colunm-dialog.vue';
import Browser from './components/browse/browse.vue';
import BrowseTootipDesc from './components/browse/browse-tootip-desc.vue';
import LineChart from './components/line-chart/line-chart.vue';
import ChartTootipDesc from './components/line-chart/chart-tootip-desc.vue';
import {
    getCustomerGroupCensusData,
    getCustomerGroupCensusBasicData
} from '@/api/dataCenter/customerGroupAnalysis/customerGroupData';

import { getDay } from '@/utils/utils';

const lineChart = ref();
const basicInfo = ref(); // 客户群基本信息
const chartInfo = ref();

/** 查询群基础数据的时间 */
const screenTimeRange = ref([getDay(-7), getDay(-1, true)]);
/** 选中的列的key */
const params = reactive<{ data_range?: string }>({
    data_range: ''
});
// 客户群统计数据概览
const getGroupCensusInfo = async () => {
    const res = await getCustomerGroupCensusData(params);

    basicInfo.value = res;
};

// 客户群统计基本信息
const getGroupBasicInfo = async () => {
    const res = await getCustomerGroupCensusBasicData({ ...params, screen_time_range: screenTimeRange.value });
    lineChart.value.searchLineInfo(res[0].field_key, res[0].field_name);
    chartInfo.value = res;
};

/**
 * 更改时间时重新查询群基础数据列
 */
const handleChangeDate = async (screen_time_range: any[]) => {
    screenTimeRange.value = screen_time_range;
    const res = await getCustomerGroupCensusBasicData({ ...params, screen_time_range });
    chartInfo.value = res;
};

/* ----------------------------自定义选择列-start---------------------------- */
const selectColumnVisable = ref(false);

/** 描述的组件 */
const componentId = ref(BrowseTootipDesc);

/** 二次处理弹窗的内容 */
const handleFormatData = async (column: any[]) => {
    let res = null;
    if (selectColumnProps.type === 1) {
        res = await getCustomerGroupCensusData({ data_range: 'all' });
    } else {
        res = await getCustomerGroupCensusBasicData({ data_range: 'all', screen_time_range: screenTimeRange.value });
    }

    const columnMap = {};
    column.forEach((item: any) => {
        columnMap[item.field_key] = item;
    });

    res.forEach((item: any) => {
        Object.assign(columnMap[item.field_key], item);
    });
    return column;
};

/** 选择列的props参数 */
const selectColumnProps = reactive<ISelectColumnProps>({
    type: 1,
    length: 6,
    title: '数据概览',
    formatData: handleFormatData
});
/**
 * 打开数据概览配置列
 */
const onSelectColumn = () => {
    Object.assign(selectColumnProps, {
        type: 1,
        length: 6,
        title: '数据概览'
    });
    componentId.value = BrowseTootipDesc;
    selectColumnVisable.value = true;
};

/**
 * 打开群基础数据配置列
 */
const onSelectGroupBasicColumn = () => {
    Object.assign(selectColumnProps, {
        type: 2,
        length: 7,
        title: '群基础数据'
    });
    componentId.value = ChartTootipDesc;
    selectColumnVisable.value = true;
};

const onSubmit = () => {
    selectColumnVisable.value = false;
    if (selectColumnProps.type === 1) {
        getGroupCensusInfo();
    } else {
        getGroupBasicInfo();
    }
};
/* ----------------------------自定义选择列-end---------------------------- */
onMounted(() => {
    getGroupCensusInfo();
    getGroupBasicInfo();
});

/** 选择列的props参数 */
interface ISelectColumnProps {
    /** 1: 数据概览，2: 群基础数据 */
    type: number;
    /** 最大选择的长度 */
    length: number;
    /** 弹窗标题 */
    title: string;
    formatData: (column: Array<any>) => void;
}
</script>
